import style from './index.module.less'
import Title from '@components/title'
import { DownFill } from 'antd-mobile-icons'
import { useState } from 'react'
import classNames from 'classnames'
import { useAppDispatch } from '@src/redux/hook'
import { push } from '@src/redux/reducers/pages'

function Main ({ data }) {
  const [active, setActive] = useState(false)
  const dispatch = useAppDispatch()
  return (
    <>
      <Title title='仲裁依据' />
      <div className={classNames(style.container, {[style.active]: active})} onClick={() => {
        setActive(true)
        dispatch(push({ element: 'editAccord', meta: {  caseid: data.id } }))
        setTimeout(() => {
          setActive(false)
        }, 150)
      }}>
        <div className={style.inner}>
          <div className={style.label}>仲裁依据</div>
          <div className={style.value}>{data.basis || '无'}</div>
          <div className={style['icon-container']}><DownFill className={style.icon} /></div>
        </div>
      </div>
    </>
  )
}

export default Main